{% extends "index.html" %}
{% block title %}订单管理{% endblock %}

{% block css %}
<style>
    #BloodSpiderBox {
        padding: 20px;
    }

    .layui-btn {
        border-radius: 4px;
    }

    .layui-form-item {
        margin-bottom: 15px;
    }

    .layui-table {
        border-radius: 4px;
        overflow: hidden;
    }

    .layui-table-header {
        background-color: #f8f8f8;
    }

    .layui-table th {
        font-weight: 600;
    }

    .layui-card {
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .layui-card-header {
        background-color: #fff;
        border-bottom: 1px solid #e6e6e6;
        padding: 15px;
        font-weight: 600;
    }

    .layui-card-body {
        padding: 15px;
    }

    .search-container {
        margin-bottom: 15px;
    }

    .status-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
    }

    .status-pending {
        background-color: #fff2e8;
        color: #fa8c16;
    }

    .status-paid {
        background-color: #e6f7ff;
        color: #1890ff;
    }

    .status-shipped {
        background-color: #e6f4ff;
        color: #4096ff;
    }

    .status-completed {
        background-color: #f6ffed;
        color: #52c41a;
    }

    .status-canceled {
        background-color: #f5f5f5;
        color: #8c8c8c;
    }
</style>
{% endblock %}

{% block body %}
<!-- 搜索区域 -->
{% include "页面/订单/搜索订单.html" %}

<!-- 订单表格 -->
<div class="layui-card">
    <div class="layui-card-header">订单列表</div>
    <div class="layui-card-body">
        <table class="layui-table" id="orderTable" lay-filter="orderTable"></table>
    </div>
</div>

<!-- 订单操作栏 -->
<script type="text/html" id="orderBar">
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="update">更新</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</button>
</script>

<script>
    // 定义默认的userInfo对象，防止访问未初始化的错误
    window.userInfo = window.userInfo || { uid: '' };
    
    // 等待DOM加载完成
    document.addEventListener("DOMContentLoaded", function () {
        // 初始化订单表格
        layui.use(['table', 'form', 'layer', 'laydate'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var $ = layui.$;

            // 渲染订单表格
            var orderTable = table.render({
                elem: '#orderTable',
                url: '/api/order/get_order_list/', // 订单列表API
                method: 'POST',
                page: true, // 开启分页
                limit: 10,
                limits: [10, 20, 30, 50],
                where: {
                    page_size: 10,
                    page: 1,
                    keyword: "",
                    uid: userInfo.uid
                },
                request: {
                    pageName: 'page',
                    limitName: 'page_size'
                },
                parseData: function (res) {
                    // 解析返回的数据格式
                    if (res.code === 0) {
                        return {
                            "code": 0,
                            "msg": res.message || "",
                            "count": res.data.page?.count || 0,
                            "data": res.data.page?.object_list || []
                        };
                    } else {
                        return {
                            "code": 1,
                            "msg": res.message || "数据加载失败",
                            "count": 0,
                            "data": []
                        };
                    }
                },
                cols: [[
                    { field: 'oid', title: '订单ID', width: 180, align: 'center' },
                    { field: 'username', title: '用户名', width: 120, align: 'center' },
                    { field: 'product_name', title: '商品名称', width: 200, align: 'center' },
                    { field: 'points', title: '消耗积分', width: 100, align: 'center', sort: true },
                    {
                        field: 'status', title: '订单状态', width: 100, align: 'center', sort: true,
                        templet: function (d) {
                            var statusMap = {
                                1: { text: '待支付', cls: 'status-pending' },
                                2: { text: '已支付', cls: 'status-paid' },
                                3: { text: '已发货', cls: 'status-shipped' },
                                4: { text: '已完成', cls: 'status-completed' },
                                5: { text: '已取消', cls: 'status-canceled' }
                            };
                            var status = statusMap[d.status] || { text: '未知状态', cls: 'status-canceled' };
                            return '<span class="status-badge ' + status.cls + '">' + status.text + '</span>';
                        }
                    },
                    { field: 'create_time', title: '创建时间', width: 180, align: 'center' },
                    { field: 'update_time', title: '更新时间', width: 180, align: 'center' },
                    { fixed: 'right', title: '操作', width: 160, align: 'center', toolbar: '#orderBar' }
                ]],
                text: {
                    none: '暂无订单数据'
                },
                done: function (res, curr, count) {
                    // 表格渲染完成后的回调
                    console.log('订单列表加载完成', res);
                }
            });

            // 初始化搜索功能
            searchOrderInit($, orderTable, form);

            // 初始化操作栏功能
            orderBarInit(table, form, layer, $);
        });
    });
</script>
{% endblock %}